<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:f="http://java.sun.com/jsf/core"
                template="/templates/mainLayout.xhtml">
    <f:metadata>
        <f:viewParam id="itemId" name="itemId" value="#{itemBean.itemId}" />
    </f:metadata>
    <ui:define name="title" rendered="#{itemBean.currentItem != null}">#{itemBean.currentItem.name}</ui:define>
    <ui:define name="meta">
        <meta name="keywords" content="#{itemBean.currentItem.tags}" />
        <meta name="description" content="#{itemBean.currentItem.introduction}" />
    </ui:define>
    <ui:define name="menu">
        <nav class="vertical menu">
            <ul>
                <ui:repeat value="#{itemBean.categoryList}" var="category">
                    <h:panelGroup rendered="#{category.devices.size() > 0 ? (category.devices.contains(session.getAttribute('DEVICE'))) : true}">
                        <li><a style="background: lightyellow; font-weight: bold; color: hotpink;" href="#{request.contextPath}/category/#{category.id}/#{category.url}">#{category.name}</a></li>
                    </h:panelGroup>
                </ui:repeat>
            </ul>
        </nav>
    </ui:define>
    <ui:define name="content">
        <h:panelGroup rendered="#{itemBean.currentItem.devices.size() > 0 ? (itemBean.currentItem.devices.contains(session.getAttribute('DEVICE'))) : true}">
            <div class="content">
                <article>
                    <h2 class="underline">#{itemBean.currentItem.name}</h2>
                    <p><h:outputText value="#{itemBean.currentItem.content}" escape="false"/></p>
                </article>
            </div>
        </h:panelGroup>
    </ui:define>
</ui:composition>